1
00:00:02,040 --> 00:00:04,680
이제 우리는 서버 측 코드도 실행합니다.

2
00:00:04,680 --> 00:00:08,270
getStaticProps에서는 아무리 강조해도 지나치지 않습니다.

3
00:00:08,270 --> 00:00:10,600
이것이 표준적인 방법이라는 것입니다.

4
00:00:10,600 --> 00:00:13,230
이 코드는 클라이언트측 번들에 포함되지 않습니다.

5
00:00:13,230 --> 00:00:15,560
귀하의 자격 증명은 노출되지 않습니다.

6
00:00:15,560 --> 00:00:17,870
번들은 부풀어오르지 않을 것입니다.

7
00:00:17,870 --> 00:00:21,623
이 코드는 이 페이지가 사전 생성될 때 실행됩니다.

8
00:00:22,890 --> 00:00:26,200
이제 MeetupDetail 페이지에서

9
00:00:26,200 --> 00:00:29,970
이제 데이터베이스에서 데이터를 가져오고 싶습니다.

10
00:00:29,970 --> 00:00:33,120
선택된 특정 모임에 대해

11
00:00:33,120 --> 00:00:37,700
생성할 경로를 결정하는 데도 사용됩니다.

12
00:00:37,700 --> 00:00:40,540
그렇다면 어떤 모임 ID를 지원해야 할까요?

13
00:00:40,540 --> 00:00:41,627
왜냐면 결국,

14
00:00:41,627 --> 00:00:44,940
우리는 모임 목록이 제한적이에요

15
00:00:44,940 --> 00:00:47,140
여기에 특정 ID가 있습니다.

16
00:00:47,140 --> 00:00:49,560
그래서 우리는 모든 경로를 미리 생성하고 싶습니다

17
00:00:49,560 --> 00:00:51,803
여기에 있는 모든 ID에 대해.

18
00:00:52,660 --> 00:00:54,280
그러므로 우리는 다시 필요합니다

19
00:00:54,280 --> 00:00:56,680
MongoDB에 연결합니다.

20
00:00:56,680 --> 00:00:58,690
이를 위해 index.js에서

21
00:00:58,690 --> 00:01:01,410
이 연결 코드를 다시 복사하겠습니다.

22
00:01:01,410 --> 00:01:03,610
그리고 다시 리팩터링을 할 수 있습니다.

23
00:01:03,610 --> 00:01:06,523
중복을 피하고 싶다면.

24
00:01:07,370 --> 00:01:11,320
여기에서 MongoClient를 가져오겠습니다.

25
00:01:11,320 --> 00:01:15,560
mongodb에서 이렇게

26
00:01:15,560 --> 00:01:19,520
MeetupId index.js 파일에서

27
00:01:19,520 --> 00:01:22,153
그런 다음 여기서 getStaticPaths로 시작할 수 있습니다.

28
00:01:23,440 --> 00:01:26,530
거기서 내 데이터베이스에 연결하고 싶어요

29
00:01:26,530 --> 00:01:28,480
그리고 MeetupsCollection에 액세스하세요.

30
00:01:29,400 --> 00:01:33,670
그리고 이제 여기에서 모든 모임 데이터를 가져오고 싶습니다.

31
00:01:33,670 --> 00:01:36,150
그래서 저는 모임을 갖습니다

32
00:01:36,150 --> 00:01:41,080
다시 MeetupsCollection.find를 기다립니다.

33
00:01:41,080 --> 00:01:43,790
찾기를 통해 모든 모임에 액세스할 수 있습니다.

34
00:01:44,710 --> 00:01:48,120
자, 실제로 여기서는 ID에만 관심이 있습니다.

35
00:01:48,120 --> 00:01:50,290
따라서 우리는 find를 조정할 수 있습니다

36
00:01:50,290 --> 00:01:53,340
빈 객체를 첫 번째 인수로 전달합니다.

37
00:01:53,340 --> 00:01:56,350
여기에서 필터 기준을 정의할 수 있습니다.

38
00:01:56,350 --> 00:01:59,020
모든 문서를 찾지 않으려면

39
00:01:59,020 --> 00:02:02,210
하지만 특정 필드 값을 필터링합니다.

40
00:02:02,210 --> 00:02:03,960
하지만 나는 여기서 모든 것을 찾고 싶습니다.

41
00:02:03,960 --> 00:02:06,040
따라서 우리는 빈 객체를 사용합니다.

42
00:02:06,040 --> 00:02:08,750
그것은 나에게 모든 물건을 준다는 것을 의미합니다.

43
00:02:08,750 --> 00:02:11,039
필터 기준이 없습니다

44
00:02:11,900 --> 00:02:14,370
하지만 두 번째 인수를 전달할 수 있습니다

45
00:02:14,370 --> 00:02:18,010
여기서 추출해야 할 필드를 정의할 수 있습니다.

46
00:02:18,010 --> 00:02:19,790
모든 문서에 대해.

47
00:02:19,790 --> 00:02:23,030
그리고 기본적으로 모든 필드가 반환됩니다.

48
00:02:23,030 --> 00:02:26,483
따라서 모든 필드 값, 제목, 이미지 등

49
00:02:26,483 --> 00:02:28,931
하지만 ID에만 관심이 있다면

50
00:02:28,931 --> 00:02:32,880
여기에 _id를 추가할 수도 있습니다

51
00:02:32,880 --> 00:02:34,560
이것을 1로 설정하고,

52
00:02:34,560 --> 00:02:37,330
이는 ID만 포함한다는 의미입니다.

53
00:02:37,330 --> 00:02:40,080
다른 필드 값은 없습니다.

54
00:02:40,080 --> 00:02:42,530
이를 통해 우리는 ID만 가져옵니다.

55
00:02:42,530 --> 00:02:44,530
그래서 우리는 문서 객체를 가져옵니다

56
00:02:44,530 --> 00:02:48,463
하지만 각각에는 ID만 포함되며 다른 것은 포함되지 않습니다.

57
00:02:49,600 --> 00:02:51,680
이제 다시 여기서 toArray를 호출해야 합니다.

58
00:02:51,680 --> 00:02:55,440
이를 JavaScript 객체 배열로 변환합니다.

59
00:02:55,440 --> 00:02:57,570
그리고 이제 여기서 모임이 생겼습니다

60
00:02:57,570 --> 00:03:00,393
이제 동적으로 경로를 생성할 수 있습니다.

61
00:03:01,260 --> 00:03:03,550
이 배열을 하드 코딩하는 대신,

62
00:03:03,550 --> 00:03:05,760
여기서 모임을 이용하면 돼요

63
00:03:05,760 --> 00:03:08,690
그런 다음 모든 모임 항목을 매핑하고

64
00:03:08,690 --> 00:03:11,150
ID가 있는 문서입니다.

65
00:03:11,150 --> 00:03:16,150
경로는 객체의 배열이어야 하기 때문에 객체로

66
00:03:17,100 --> 00:03:20,030
모든 객체에는 이 params 키가 있습니다.

67
00:03:20,030 --> 00:03:22,120
저 아래에 있는 것처럼 말이죠.

68
00:03:22,120 --> 00:03:24,560
그리고 거기에 중첩된 개체가 있습니다.

69
00:03:24,560 --> 00:03:27,830
여기서 MeetupId 값을 정의합니다.

70
00:03:27,830 --> 00:03:32,093
그리고 여기서 MeetupId 값은 이제 우리의 ID가 되어야 합니다.

71
00:03:33,490 --> 00:03:36,280
그러면 여기서 모임에 액세스할 수 있습니다.

72
00:03:36,280 --> 00:03:40,485
지도가 자동으로 제공하는 이 매개변수는

73
00:03:40,485 --> 00:03:42,568
._id.toString, 그렇죠.

74
00:03:47,600 --> 00:03:49,823
이제 여기서 이 배열을 제거하세요.

75
00:03:51,200 --> 00:03:56,090
이를 통해 우리는 경로 배열을 동적으로 생성합니다.

76
00:03:56,090 --> 00:03:59,090
결과적으로 지금 이것을 저장하면

77
00:03:59,090 --> 00:04:00,630
시작 페이지를 다시 로드하면

78
00:04:00,630 --> 00:04:02,230
세부정보 표시를 클릭하면

79
00:04:02,230 --> 00:04:05,650
이 특정 개체에 대한 페이지로 이동하고

80
00:04:05,650 --> 00:04:07,570
이 특정 모임을 위해.

81
00:04:07,570 --> 00:04:09,870
여기에서 이 비밀스러운 ID를 볼 수 있습니다.

82
00:04:09,870 --> 00:04:14,870
이는 MongoDB가 우리를 위해 생성한 자동 생성 ID입니다.

83
00:04:15,670 --> 00:04:17,510
그래서 효과가 있습니다.

84
00:04:17,510 --> 00:04:21,149
하지만 여기서는 아직 데이터를 동적으로 가져오지 않습니다.

85
00:04:21,149 --> 00:04:23,380
나도 그러고 싶다.

86
00:04:23,380 --> 00:04:24,420
이를 위해 우선,

87
00:04:24,420 --> 00:04:27,020
여기서 연결을 끊겠습니다.

88
00:04:27,020 --> 00:04:30,200
일이 끝난 후에 그렇게 하는 것도 나쁘지는 않아요

89
00:04:30,200 --> 00:04:32,250
그런 다음 이 코드를 복사하겠습니다.

90
00:04:32,250 --> 00:04:35,007
getStaticPaths에서 여기에 추가하세요.

91
00:04:36,530 --> 00:04:39,793
ID를 기록하는 대신 MeetupId를 얻은 후입니다.

92
00:04:40,750 --> 00:04:43,730
다시 연결하여 컬렉션에 액세스하겠습니다.

93
00:04:43,730 --> 00:04:45,830
다시 말하지만, 우리는 이것을 함수로 아웃소싱할 수 있습니다.

94
00:04:45,830 --> 00:04:47,690
우리가 원한다면.

95
00:04:47,690 --> 00:04:50,410
그런 다음 여기서 단일 모임에 액세스하고 싶습니다.

96
00:04:50,410 --> 00:04:54,010
모든 모임이 아니라 딱 한 번만 모임을 가집니다.

97
00:04:54,010 --> 00:04:56,730
그래서 여기서 내가 선택한 Meetup에 액세스하고 싶습니다.

98
00:04:56,730 --> 00:04:59,760
그리고 MeetupsCollection을 사용하여 이를 수행합니다.

99
00:04:59,760 --> 00:05:02,543
그런 다음 findOne 메소드를 사용하십시오.

100
00:05:03,795 --> 00:05:07,530
findOne은 하나의 문서를 찾습니다.

101
00:05:07,530 --> 00:05:10,650
그리고 findOne을 위해서는 객체를 전달해야 합니다.

102
00:05:10,650 --> 00:05:13,010
여기서 필터링 방법을 정의하고

103
00:05:13,010 --> 00:05:16,080
해당 문서를 검색하는 방법.

104
00:05:16,080 --> 00:05:19,940
이 객체에서는 필드 이름을 전달할 수 있습니다.

105
00:05:19,940 --> 00:05:23,940
제목, 이미지, 주소, 설명 등을 키로 사용

106
00:05:23,940 --> 00:05:27,400
그런 다음 값으로 검색하려는 값을 선택합니다.

107
00:05:27,400 --> 00:05:31,160
따라서 제목: A First Meetup을 키-값 쌍으로 전달할 수 있습니다.

108
00:05:31,160 --> 00:05:33,730
여기 이 물체에

109
00:05:33,730 --> 00:05:38,363
제목이 A First Meetup인 첫 번째 모임을 찾으려고요.

110
00:05:39,260 --> 00:05:41,270
자, 여기서는 제목으로 검색하고 싶지 않습니다.

111
00:05:41,270 --> 00:05:42,990
대신 ID로.

112
00:05:42,990 --> 00:05:45,390
그래서 그 _id를 확인하고 싶어요.

113
00:05:45,390 --> 00:05:49,310
자동으로 추가되고 생성된 ID 필드

114
00:05:49,310 --> 00:05:54,210
MeetupId 값이 있으므로 이 MeetupId는

115
00:05:54,210 --> 00:05:56,793
우리는 거기에 있는 매개변수에서 추출합니다.

116
00:05:57,820 --> 00:06:00,540
그런 다음 이 단일 모임을 찾습니다.

117
00:06:00,540 --> 00:06:03,770
비동기 작업이기 때문에 Promise를 반환합니다.

118
00:06:03,770 --> 00:06:05,870
그러므로 우리는 이것을 기다려야 합니다

119
00:06:05,870 --> 00:06:09,600
함수 앞에 async를 추가했는지 확인하세요.

120
00:06:09,600 --> 00:06:12,810
이런, 그리고 결국 우리는 selectedMeetup을 얻었습니다.

121
00:06:14,165 --> 00:06:16,018
이제 선택된 Meetup입니다.

122
00:06:16,018 --> 00:06:19,768
여기에서는 이렇게 MeetupData로 반환합니다.

123
00:06:22,890 --> 00:06:25,440
그런 다음 그렇게 하고 모든 것을 저장하면

124
00:06:25,440 --> 00:06:28,230
여기서 이 모임을 다시 로드하면

125
00:06:28,230 --> 00:06:29,780
성공적으로 로드되어야 합니다

126
00:06:29,780 --> 00:06:31,950
모든 데이터가 표시되어야 합니다.

127
00:06:31,950 --> 00:06:34,770
하지만 지금 이 순간 제가 여기 보여드리는 데이터는

128
00:06:34,770 --> 00:06:37,660
JSX 코드에는 여전히 하드코딩되어 있습니다.

129
00:06:37,660 --> 00:06:40,690
이제 마침내 여기서 소품 데이터를 사용할 시간입니다.

130
00:06:40,690 --> 00:06:44,920
따라서 JSX 코드의 실제 페치 데이터도 마찬가지입니다.

131
00:06:44,920 --> 00:06:47,220
이를 위해 MeetupData 소품을 노출합니다.

132
00:06:47,220 --> 00:06:50,470
구성 요소에 추가하므로 여기서는 props를 수락해야 합니다.

133
00:06:50,470 --> 00:06:52,707
여기서 그 데이터를 사용하세요.

134
00:06:52,707 --> 00:06:57,350
이미지의 경우 props.image를 전달합니다.

135
00:06:58,970 --> 00:07:03,970
제목의 경우 props.title 등을 전달합니다.

136
00:07:04,390 --> 00:07:05,660
주소도 마찬가지입니다.

137
00:07:05,660 --> 00:07:08,570
그것은 props.address입니다.

138
00:07:08,570 --> 00:07:11,633
설명은 props.description입니다.

139
00:07:13,230 --> 00:07:16,723
그리고 실제로는 props dot이 아니라 props.meetupData dot입니다.

140
00:07:19,990 --> 00:07:22,750
MeetupData 소품이 있기 때문에

141
00:07:22,750 --> 00:07:26,830
모임아이템, 모임오브젝트를 담는 소품입니다.

142
00:07:26,830 --> 00:07:30,160
따라서 먼저 MeetupData 개체를 자세히 살펴보아야 합니다.

143
00:07:30,160 --> 00:07:34,580
이미지, 제목, 주소 및 설명에 액세스하기 전에.

144
00:07:34,580 --> 00:07:36,040
이제 모든 작업을 완료하고 나면

145
00:07:36,040 --> 00:07:38,320
하지만 우리가 해야 할 일이 하나 더 있어요.

146
00:07:38,320 --> 00:07:39,860
방금 알아 차린 것입니다.

147
00:07:39,860 --> 00:07:42,580
여기서 findOne을 위해 ID를 찾고 있습니다.

148
00:07:42,580 --> 00:07:44,890
내가 나가는 ID와 동일합니다.

149
00:07:44,890 --> 00:07:48,670
내 URL이지만 물론 문자열이 됩니다.

150
00:07:48,670 --> 00:07:51,160
MongoDB에서는 실제로

151
00:07:51,160 --> 00:07:55,410
우리 ID는 이상한 객체 ID입니다.

152
00:07:55,410 --> 00:07:59,430
특정 ID를 올바르게 찾을 수 있도록 하려면,

153
00:07:59,430 --> 00:08:01,010
문자열에서 변환해야 합니다

154
00:08:01,010 --> 00:08:03,371
그런 객체 ID에

155
00:08:03,371 --> 00:08:05,390
이를 위해 MongoDB에서

156
00:08:05,390 --> 00:08:09,160
다음과 같이 ObjectId를 가져와야 합니다.

157
00:08:09,160 --> 00:08:12,180
끝에 소문자 D가 있습니다.

158
00:08:12,180 --> 00:08:14,680
그리고 그걸로 끈을 감싸세요.

159
00:08:14,680 --> 00:08:19,140
여기 아래에서 MeetupId를 ObjectId로 감싸세요.

160
00:08:19,140 --> 00:08:21,020
그러면 이 문자열이 변환됩니다.

161
00:08:21,020 --> 00:08:23,840
그러한 ObjectId 개체에.

162
00:08:23,840 --> 00:08:25,334
그리고 일단 그것이 완료되면,

163
00:08:25,334 --> 00:08:28,020
우리도 selectedMeetup에 가고 싶어

164
00:08:28,020 --> 00:08:31,940
거기서 이 ID를 변환했는지 확인하세요.

165
00:08:31,940 --> 00:08:35,230
이 _id 필드를 문자열로 다시 변환

166
00:08:35,230 --> 00:08:38,450
그렇지 않으면 직렬화 오류가 발생하기 때문입니다.

167
00:08:38,450 --> 00:08:39,673
우리는 전에 봤어.

168
00:08:40,539 --> 00:08:44,030
이를 위해 실제로 MeetupData를 객체로 설정하겠습니다.

169
00:08:44,030 --> 00:08:46,360
여기에 ID 필드를 추가합니다.

170
00:08:46,360 --> 00:08:48,610
이는 selectedMeetup._id.toString과 동일합니다.

171
00:08:52,080 --> 00:08:53,980
그런 다음 다른 모든 데이터를 추가하면

172
00:08:53,980 --> 00:08:56,500
selectedMeetup.title처럼,

173
00:08:56,500 --> 00:09:00,700
그런 다음 주소는 selectedMeetup.address입니다.

174
00:09:00,700 --> 00:09:04,250
그런 다음 선택한 이미지가 Meetup.image입니다.

175
00:09:04,250 --> 00:09:06,530
그리고 마지막으로 중요한 것은

176
00:09:06,530 --> 00:09:09,463
selectedMeetup.description이라는 설명입니다.

177
00:09:12,491 --> 00:09:15,250
모든 작업이 완료되었으므로 이제 이것을 저장하면

178
00:09:15,250 --> 00:09:17,420
단일 모임 페이지를 다시 로드하면

179
00:09:17,420 --> 00:09:20,950
해당 단일 모임에 대한 데이터가 표시됩니다.

180
00:09:20,950 --> 00:09:24,160
그리고 그것은 이제 모든 모임에 적용됩니다.

181
00:09:24,160 --> 00:09:26,980
이제 모임 세부정보 페이지가 표시됩니다.

182
00:09:26,980 --> 00:09:30,710
서버에서 동적으로 사전 렌더링됩니다.

183
00:09:30,710 --> 00:09:33,670
우리 코드가 활성화된 상태에서

184
00:09:33,670 --> 00:09:37,630
그리고 해당 데이터베이스 연결을 설정하는 코드를 사용하여

185
00:09:37,630 --> 00:09:39,713
거기에서 데이터를 가져옵니다.